<template>
    <div :style="[{ width: width + 'px' }, { height: width + 'px' },
    { background: `linear-gradient(to bottom, ${lightColor} 50%, ${deepColor} 100%)` },
    { border: `2px solid ${deepColor}` }]" class="wave">
        <div :style="[{ bottom: bottom + 'px' }]" class="wave-ball"></div>
        <div :style="[{ width: width + 'px' }, { height: width + 'px' }]" class="content">
            <slot></slot>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {

        }
    },
    computed: {
        bottom() {
            return this.width * this.proportion
        },
    },
    props: {
        width: {
            type: Number,
            default: 130,
        },
        lightColor: {
            type: String,
            default: '#ffca6c',
        },
        deepColor: {
            type: String,
            default: '#ff413f',
        },
        proportion: {
            type: Number,
            default: 0.5,
        },
    }
}
</script>

<style lang="scss" scoped>
.wave {
    border-radius: 50%;
    position: relative;
    box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.wave .wave-ball {
    width: 200px;
    height: 200px;
    background-color: #444F64;
    // background-color:rgb(64, 158, 255);
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 40%;
    /* 执行动画：动画名称 时长 线性的 无限次播放 */
    animation: wave 5s linear infinite;
}

/* 定义动画 */
@keyframes wave {
    100% {
        transform: translate(-50%, 0) rotate(360deg);
    }
}

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 9;
}
</style>
